<template>
  <div class="faq-section">
    <CellGroup class="notice-section" inset>
      <Cell v-for="item in state.data"
        :title="item.noticeTitle"
        :label="item.noticeContent"
        :key="item.noticeId" />
    </CellGroup>
  </div>
</template>
<script setup lang="ts">
import { Cell, CellGroup } from 'vant';
import { onMounted, ref } from 'vue';

import { deserialize } from '@/plugins/reflect-metadata';
import type { ListState } from '@/types';

import { getFaq } from '../api';
import FaQuestionList, { FaQuestionItem, FaQuestionQuery } from '../models/FaQuestionList';

const params = ref<FaQuestionQuery>(new FaQuestionQuery());
const state = ref<ListState<FaQuestionItem>>({
  data: [],
  loading: false,
  total: 0,
});

const fetchData = async () => {
  try {
    state.value.loading = true;
    const { data } = await getFaq(params.value);
    const resultData = deserialize(data, FaQuestionList);
    state.value.data = resultData.items;
    state.value.total = resultData.total;
  } catch (error) {
    //
  } finally {
    state.value.loading = false;
  }
};

onMounted(() => {
  fetchData();
});

</script>
<style lang="less" scoped>
.faq-section {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  .notice-section {
    margin-top: 20px;
  }
}
</style>
